<template>
	<view>
		<view class="flex1 padl2">
			<view class="list-style-1 pad2">已选设备</view>
			<view class="mart2">
				<view class="pad2 bdbdo flrc pos-r" @tap="selectDevice(device)" v-for="(device,index) in deviceSelected">
					<view>[{{device.sn}}]</view>
					<view class="flex1 padl1 padtb2">{{device.name}}</view>
					<view class="fs12"><view class="fa fa-close"></view></view>
					<ripple></ripple>
				</view>
			</view>
		</view>
		
		<view class="list-style-2 pad2">查询筛选</view>
		<view class="flrc bdbso">
			<stext class="flex1" label="设备检索" placeholder="名称或编号" v-model="deviceSearchKey"></stext>
			<view @tap="searchDevice" class="cu-btn bg-blue pos-r">查询 <ripple></ripple></view>
		</view>
		<view class="flrc bdbso">
			<sentity class="flex1" url="/mes/admin/Department/choice" label="按车间筛选" placeholder="按车间筛选" v-model="departmentId"></sentity>
			<view @tap="searchDeviceByDepartment" class="cu-btn bg-blue pos-r">查询 <ripple></ripple></view>
		</view>
		<view class="mart2 flex-r flex-fill">

			<view class="flex1">
				<view class="mart2">
					<view class="pad2 bdbdo flrc pos-r" 
					:class="{'bg-green':device.selected===true}"
					@tap="selectDevice(device)" v-for="(device,index) in deviceSelectChoices">
						<view>[{{device.sn}}]</view>
						<view class="flex1 padl1 padtb2">{{device.name}}</view>
						<view class="fs12"><view class="fa fa-plus-square"></view></view>
						<ripple></ripple>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import com from '../../../assets/js/com'
	import PublicData from './PublicData'
	export default {
		props:{
			value:{
				default(){
					return []
				}
			},
		},
		data() {
			return {
				pd:PublicData,
				deviceSearchKey:"",
				departmentId:0,
				deviceSelectChoices:[],
				deviceSelected:[],
			}
		},
		mounted() {
			// let deviceSelected = this.$com.getLocDataObject("mes.baogong.devices")
			// if (deviceSelected != false){
			// 	this.deviceSelected = deviceSelected
			// 	this.pd.devices = deviceSelected
			// 	this.valueOut()
			// }
			
			this.deviceSelected = this.value
			this.pd.devices = this.value
			if (this.pd.curProcessConfig){
				this.departmentId = this.pd.curProcessConfig.process.departmentId
				this.searchDeviceByDepartment()
			}
		},
		methods: {
			searchDevice(){
				this.loading = true
				this.$api.post("/mes/admin/Device/list",{
					_where:{
						_or:[
							{name__regex:this.deviceSearchKey},
							{sn__regex:this.deviceSearchKey},
						]
					}
				},res=>{
					this.deviceSelectChoices = res.data.lists
					this.loading = false
					this.remarkDeviceChoices()
				})
			},
			searchDeviceByDepartment(){
					this.loading = true
					this.$api.post("/mes/admin/Device/list",{
						_where:{
							departmentId:this.departmentId
						},
						limit:0
					},res=>{
						this.loading = false
						this.deviceSelectChoices = res.data.lists
						this.remarkDeviceChoices()
					})
			},
			selectDevice(device){
				let find = -1
				for(let index in this.deviceSelected){
					if (this.deviceSelected[index].id === device.id){
						find = index
					}
				}
				if (find > -1){
					this.deviceSelected.splice(find,1)
				}else{
					//this.deviceSelected.push(device)
					this.deviceSelected = [device]
				}
				this.remarkDeviceChoices()
				this.valueOut()
				this.pd.devices = this.deviceSelected
				this.$com.setLocData("mes.baogong.devices",this.deviceSelected)
			},
			remarkDeviceChoices(){
				for (let choice of this.deviceSelectChoices) {
					choice.selected = false
					for (let device of this.deviceSelected) {
						if (device.id == choice.id){
							choice.selected = true
						}
					}
				}
			},
			valueOut(){
				this.$emit("input",this.deviceSelected)
			}
		},
		getDevices(){
			let deviceSelected = com.getLocDataObject("mes.baogong.devices")
			if (deviceSelected != false){
				return deviceSelected
			}
			return []
		}
	}
</script>

<style>

</style>
